<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"
    />
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
    <title>23215220237 张宏宇</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 按顺序引入：外链式样式表后写的生效 -->
    <link rel="stylesheet" href="bass.min.css"/>
<style>
    .header.wrapper {
  display: grid ; 
  /* 设置为网络布局模式，同时按网络格式排序 */
  grid-template-columns: auto 1fr auto auto; /* Logo | 导航 | 搜索 | 购物车 */
  align-items: center;
  /* 垂直居中对齐 */
  gap: 20px;
  /* 子项之间间隔设置成20px */
  padding: 10px 20px;
  /*  设置内边距*/
}

.nav ul {
  display: flex;
  /* 设置为弹性布局 */
  list-style: none;
  /* 去掉列表符号 */
  gap: 20px;
}

.nav a {
  position: relative;      
  /* 为链接定位提供上下文 */
  text-decoration: none;   
  /* 去掉下划线 */
  color: #333;            
  padding: 5px 0;           
  transition: color 0.3s;  
}


.nav a:hover {
  color: #ff6600;         
  /* 鼠标悬停时文字颜色变成橙色 */
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;                  
  bottom: -2px;           
  width: 0;                
  height: 2px;             
  background: #ff6600;     
  /*transition: width 0.3s ease; */
}

.nav a:hover::after {
  width: 100%;              
}

.banner {
  position: relative;  
  height: auto;       
}


.aside {
  position: absolute;
  left: 13px;
  top: 120px;
  bottom: auto;   
        /* 由内容高度自动决定底部位置 */
  width: 200px;
  background: rgba(0,0,0,0.7);
  z-index: 10;    
   /*高的堆叠顺序，确保元素显示在顶层  */
}



.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* 菜单项自适应高度 */
.aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;            
  display: flex;
  flex-direction: column;
}

.aside li {
  padding: 12px 20px;
  transition: background 0.3s;
  flex: 1;           
  display: flex;
  align-items: center; 
}

.aside li:hover {
  background: rgba(255, 103, 0, 0.8); 
}


.aside a {
  color: white;
  text-decoration: none;
  width: 100%;
}

.aside span {
  margin-left: 8px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.aside li:hover span {
  opacity: 1;
}

.banner.wrapper {
  display: flex;
  height: 400px;
}


.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; 
    width: 100%;                    
  }
  .product-list li {
    flex: 1;                       
    min-width: 0;                 
    margin: 0 10px;               
  }
  .product-list li:first-child {
    margin-left: 0;               
  }
  .product-list li:last-child {
    margin-right: 0;               
  }
  .img-placeholder {
    width: 100%;                   
    height: 250px;
    background: #000000;
  }
/*底部样式*/
  .footer {
      display: flex;
      justify-content: space-around;
      background-color: #f9f9f9;
      padding: 40px 20px;
      border-top: 1px solid #ddd;
    }
    .footer-section {
      text-align: center;
    }
    .footer-section h3 {
      margin-bottom: 15px;
      color: #555;
    }
    .footer-section div,
    .footer-section p {
      margin: 10px 0;
      color: #333;
    }
    .qr {
      width: 100px;
      height: 100px;
      background: url('your_qr_code.png') no-repeat center center;
      background-size: contain;
      margin: 0 auto;
    }

    .qr-placeholder {
    width: 150px;          /* 二维码常见尺寸 */
    height: 150px;
    background: #f0f0f0;   
    border: 1px dashed #999; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;           
    font-size: 14px;
    margin: 10px 0;        
    
  }
</style>



  </head>
  <body>
    <!-- 快捷导航 -->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li><a href="#">请先登录</a></li>
          <li><a href="#">免费注册</a></li>
          <li><a href="./personal_center.html">我的订单</a></li>
          <li><a href="#">会员中心</a></li>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">在线客服</a></li>
          <li>
            <a href="#"><span></span>手机版</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header wrapper">
      <div class="logo">
        <h1><a href="#">小兔鲜儿</a></h1>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">生鲜</a></li>
          <li><a href="#">美食</a></li>
          <li><a href="#">餐厨</a></li>
          <li><a href="#">电器</a></li>
          <li><a href="#">居家</a></li>
          <li><a href="#">洗护</a></li>
          <li><a href="#">孕婴</a></li>
          <li><a href="#">服装</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="搜一搜" />
        <!-- 定位放大镜 -->
        <span></span>
      </div>
      <div class="car">
        <a href="#"><span></span></a>
        <span></span>
      </div>
    </div>

  <!-- 轮播区域 -->
  <div class="banner">
    <div class="wrapper">
      <ul>
        <li>
          <a href="#"><img src="banner_1.png" alt="" /></a>
        </li>
      </ul>
    </div>
  </div>

        <!-- 侧导航 -->
        <div class="aside">
          <ul>
            <li>
              <a href="#">生鲜<span>水果 蔬菜</span></a>
            </li>
            <li>
              <a href="#">美食 <span>面点 干果</span></a>
            </li>
            <li>
              <a href="#">餐厨 <span>数码产品</span> </a>
            </li>
            <li>
              <a href="#">电器 <span>床品 四件套 被枕</span> </a>
            </li>
            <li>
              <a href="#">居家 <span>奶粉 玩具 辅食</span> </a>
            </li>
            <li>
              <a href="#">洗护 <span>洗发 洗护 美妆</span> </a>
            </li>
            <li>
              <a href="#">孕婴 <span>奶粉 玩具 </span></a>
            </li>
            <li>
              <a href="#">服饰 <span>女装 男装</span> </a>
            </li>
            <li>
              <a href="#">杂货 <span>户外 图书 </span></a>
            </li>
            <li>
              <a href="#">品牌 <span>品牌制造</span> </a>
            </li>
          </ul>
        </div>

        <!-- 箭头 -->
        <!-- prev : 前一张图片  next : 下一张图片 -->
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>

        <!-- 圆点 ：当前状态： current/active-->
        <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
        <ol>
          <li></li>
          <li></li>
          <li class="current"></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>

    <div class="hd">
        <h2>新鲜好物</h2>
        <a href="#">查看全部 </a>
        <div class="xinxian">
          <ul class="product-list">
            <li>
              <a href="#">
                <!-- 图片替换为灰色占位块（尺寸与原图一致） -->
                <img src="蛋挞.jpg" alt="无法显示图片" style="width: 250px; height: 250px;">
                <h3>蛋挞</h3>
                <div>￥<span>5</span></div>
                <p>新品</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="小龙虾.jpg" alt="无法显示图片" style="width: 250px; height: 250px;">
                <h3>小龙虾</h3>
                <div>￥<span>88</span></div>
                <p>新品</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="面包.jpg" alt="无法显示图片" style="width: 250px; height: 250px;">
                <h3>面包</h3>
                <div>￥<span>15</span></div>
                <p>新品</p>
              </a>
            </li>
            
          </ul>
        </div>
        <br>
        <br> 
      <div class="hd">
          <h2>大家都在说</h2>
          <a href="#">查看详情 </a>
        <div class="xinxian">
          <ul class="product-list">
            <li>
              <a href="#">
                <!-- 图片替换为灰色占位块（尺寸与原图一致） -->
                <img src="蛋挞.jpg" alt="无法显示图片" style="width: 300px; height: 250px; background:#f0f0f0;"></div>
                <h3>话题名</h3>
                <div><span>这个蛋挞是别人扔过来做的吗O.o</span></div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="小龙虾.jpg" alt="无法显示图片" style="width: 300px; height: 250px; background:#f0f0f0;"></div>
                <h3>话题名</h3>
                <div><span>龙虾很新鲜！</span></div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="面包.jpg" alt="无法显示图片" style="width: 300px; height: 250px; background:#f0f0f0;"></div>
                <h3>话题名</h3>
                <div><span>面包很软很可口</span></div>
              </a>
            </li>
          </ul>
        </div>

        <div class="footer">
          <div class="footer-section">
            <h3>客户服务</h3>
            <div>在线客服</div>
            <div>问题反馈</div>
          </div>
        
          <div class="footer-section">
            <h3>关注我们</h3>
            <div>公众号</div>
            <div>微博</div>
          </div>
        
          <div class="footer-section">
            <h3>下载APP</h3>
            <!-- 替换二维码占位符为实际图片 -->
            <img src="二维码.jpg" alt="APP下载二维码"  style="width: 150px; height: 150px;">
            <p>扫描二维码<br>立即下载APP</p>
            <p><a href="#">下载页面</a></p>
          </div>
        
          <div class="footer-section">
            <h3>服务热线</h3>
            <div style="font-size: 20px; font-weight: bold;">666-6666-666</div>
            <div>周一至周日 8:00-18:00</div>
          </div>
        </div>

    </body>
</html>